import defaultSettings from '@/constant/defaultSettings';
import themes from '@/themes';
import { cssVar2camel, camel2cssVar, updateFavicon, transferImageUrl } from '@/utils/utils';
import { ThemeColorInstance } from '@/utils/themecolor';
import { merge } from 'lodash';
import classicImg from '@/assets/images/theme/classic.png';
import type { Model } from './connect';

const { BASE_CONFIG, MAIN_CONFIG, LOGIN_CONFIG, ...rest } = defaultSettings;

// 暂定的默认风格的less变量
const defaultCssVars = themes.defaultTheme;
// 通过下面的baseTheme改变整体的组件的风格
const baseTheme = 'default';
const baseConfig = {
  value: 'default',
  name: 'default',
  intro: '经典风格，默认风格、关键词："线条、镂空、圆角"',
  image: classicImg,
  uiConfig: {
    MAIN_CONFIG: {
      navTheme: 'light',
    },
  },
};

// 全局布局layout的css变量
const JS_VAR_KEYS = [
  'primaryColor',
  'siderMenuBackground',
  'siderMenuTextColor',
  'siderMenuLogoBackground',
  'siderMenuLogoColor',
  'globalHeaderBackground',
  'globalHeaderTextColor',
];

const mergedBaseConfig = BASE_CONFIG;
const mergedLoginConfig = LOGIN_CONFIG;
const mergedMainConfig = MAIN_CONFIG;

// 格式化配置里面图片路径
const context = require.context('..', true, /\.(png|jgp|jpeg)$/);
const images = context.keys() as string[];
const formatImgPath = (config: object) => {
  for (const _key in config) {
    if (config.hasOwnProperty(_key)) {
      const configItem = config[_key];
      const imagePath = images.find((path) => path.includes(configItem));
      imagePath && (config[_key] = context(imagePath));
    }
  }
};
formatImgPath(mergedBaseConfig);
formatImgPath(mergedLoginConfig);

// 初始化状态
const initalState = {
  BASE_CONFIG: mergedBaseConfig,
  MAIN_CONFIG: mergedMainConfig, // 主页面配置
  LOGIN_CONFIG: mergedLoginConfig,
  ...rest,
  fixSiderbar: mergedMainConfig.fixSiderbar,
  fixedHeader: mergedMainConfig.fixedHeader,
  showBreadcrumb: true, // 是否显示面包屑
  fullscreen: false, // 是否全屏
  cssVars: defaultCssVars, // 根节点变量组
  headerHeight: mergedMainConfig.headerHeight, // 头部高度
};

export type SettingsState = Readonly<typeof initalState>;

interface Settings extends Model {
  state: SettingsState;
}

const SettingModel: Settings = {
  namespace: 'settings',
  state: initalState,
  effects: {
    *setGlobalTheme({}, { put, select }) {
      const state = yield select((s) => s.settings);
      const themeConfig = {
        ...state.MAIN_CONFIG,
        navTheme: 'dark',
        ...cssVar2camel(baseConfig, JS_VAR_KEYS), // 将css变量格式装换成小驼峰
        theme: baseTheme,
      };
      const mainConfig = camel2cssVar(themeConfig, JS_VAR_KEYS); // 将小驼峰转换成css变量格式
      ThemeColorInstance.changeTheme(baseTheme, mainConfig); // 设置全局样式到html的行内
      const cssVars = merge(defaultCssVars, baseConfig, mainConfig);
      const mergedState = {
        ...state,
        MAIN_CONFIG: { ...state.MAIN_CONFIG, ...themeConfig },
        cssVars, // css全局变量
      };
      updateFavicon(BASE_CONFIG.favicon); // 修改配置中的icon图
      transferImageUrl(BASE_CONFIG); // 修改配置中的路径图片
      yield put({
        type: 'save',
        payload: {
          ...mergedState,
        },
      });
    },
  },
  reducers: {
    // 全屏切换
    togglefullscreen(state: any, { payload }) {
      return {
        ...state,
        MAIN_CONFIG: {
          ...state.MAIN_CONFIG,
          fullscreen: payload,
        },
      };
    },
    save(state: any, { payload }: any) {
      return {
        ...state,
        ...payload,
      };
    },
  },
};
export default SettingModel;
